<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="4" style="border-right: 1px solid black">
				<!-- 大类和搜索以及分页 -->
				<div class="search_part">
					<div style="margin: 10px">题库名</div>
					<el-input v-model="searchValue" placeholder="请输入标题" clearable style="margin: 10px"></el-input>
					<div style="margin: 10px">题库类型</div>
					<el-select style="margin: 10px;width: 100%;"  v-model="assessType" clearable placeholder="请选择题库类型">
							<el-option label="老年人能力评估" :value="1"></el-option>
							<el-option label="机构等级评估" :value="2"></el-option>
						</el-select>
					
				</div>
				<el-button style="margin-right: 20px;" type="primary" @click="toSearch">搜索</el-button>
				<el-button style="margin: 10px auto" type="primary" @click="openDialog('add')">添加</el-button>
				<div v-if="list.length != 0" class="table_list">
					<div class="list_item" v-for="(item, index) in list" :key="index">
						<div class="item_title" @click="toQuestionItem(item)" :style="{ color: item.textColor }">
							<el-tooltip effect="dark" :content="item.tableTitle" placement="top">
								{{ item.tableTitle }}
							</el-tooltip>
						</div>
						<div class="item_active">
							<el-icon color="#409EFF">
								<Edit />
							</el-icon>
							<span style="color: #409eff; margin-right: 10px" @click="openDialog('edit', item)">编辑</span>
							<el-icon color="#F56C6C">
								<Delete />
							</el-icon>
							<!-- <el-popconfirm :title="`请确认是否要删除${item.tableTitle}数据？`" @confirm="toDel(item)">
								<template #reference> -->
							<span style="color: #f56c6c" @click="toDel(item)">删除</span>
							<!-- </template>
							</el-popconfirm> -->
						</div>
					</div>
				</div>
				<div v-else>
					<el-empty description="没有相关数据" />
				</div>
				<div class="page_part">
					<el-pagination
						small
						background
						layout="prev, pager, next"
						:page-size="pageSize"
						:current-page="pageNum"
						:pager-count="5"
						:total="pageTotal"
						@current-change="handleCurrentChange"
					/>
				</div>
			</el-col>
			<el-col :span="20">
				<QuestionBankitem v-if="tableId" :key="key" :tableId="tableId"></QuestionBankitem>
			</el-col>
		</el-row>
		<!-- 编辑弹窗 -->
		<el-dialog v-model="dialogVisible" :title="dialogTitle" width="90%">
			<AplidForm ref="formRef" v-bind="formConfig" v-model="formModel" @reset="toBack" @submit="onSubmit"> </AplidForm>
		</el-dialog>
		<!-- 删除部分 -->
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import apiMod from '@/apiMod/index'
import QuestionBankitem from '../questionBankItem/index.vue'
import { formConfig } from './config'
import { ElMessage, ElMessageBox } from 'element-plus'

let assessType = ref(undefined)
let dialogVisible = ref(false)
let dialogTitle = ref('')
let key = ref(1)
let tableId = ref('')
let pageNum = ref(1)
let pageSize = ref(20)
let pageTotal = ref(0)
const handleCurrentChange = (page) => {
	pageNum.value = page
	initData()
}
let formModel = ref({})
// 关闭弹窗返回
const toBack = () => {
	dialogVisible.value = false
}
// 打开添加弹窗
let operateType = ref('add')
const openDialog = (type, item?) => {
	operateType.value = type
	if (type == 'add') {
		dialogTitle.value = '添加'
		formModel.value = {}
	} else {
		dialogTitle.value = '编辑'
		formModel.value = JSON.parse(JSON.stringify(item))
	}
	dialogVisible.value = true
}
// 确认提交
const onSubmit = (form, done) => {
	console.log('tijiao', form)
	form.textColor = undefined
	form.versionCode = "V1"
	if (operateType.value == 'add') {
		apiMod.view_bscAssessTableInfo_add(form).then((res) => {
			initData()
			done()
			dialogVisible.value = false
		})
	} else {
		apiMod.view_bscAssessTableInfo_edit(form).then((res) => {
			initData()
			done()
			dialogVisible.value = false
		})
	}
}
// 去删除
const toDel = (item) => {
	ElMessageBox.confirm(`请确实是否要删除${item.tableTitle}数据?`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			apiMod.view_bscAssessTableInfo_del([item.id]).then((res) => {
				ElMessage({
					type: 'success',
					message: '操作成功',
				})
				initData()
				dialogVisible.value = false
			})
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '已取消',
			})
		})
}
// 搜索
const toSearch = () => {
	pageNum.value = 1
	initData()
}
// 打开题库项
const toQuestionItem = (item: any) => {
	list.value.forEach((el, index) => {
		if (el.id == item.id) {
			list.value[index].textColor = '#409EFF'
		} else {
			list.value[index].textColor = 'black'
		}
	})
	console.log('数据', list.value)
	tableId.value = item.id
	key.value = Math.random()
}
let searchValue = ref('')
let list = ref([])
const initData = () => {
	let params = {
		assessType: assessType.value,
		tableTitle: searchValue.value,
		pageParaPO: { size: pageSize.value, current: pageNum.value },
	}
	apiMod.view_bscAssessTableInfo_page(params).then((res) => {
		pageTotal.value = res.data.total
		// 给所有数据加上颜色
		res.data.records.forEach((el) => {
			el['textColor'] = 'black'
		})
		list.value = res.data.records
		if (list.value[0]) {
			tableId.value = list.value[0].id
			list.value[0].textColor = '#409EFF'
		}

		key.value = Math.random()
		console.log('所有数据', res)
	})
}
onMounted(() => {
	initData()
})
</script>

<style scoped lang="scss">
.search_part {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: flex-start;
}
.table_list {
	min-height: 65vh;
	overflow: auto;
	.list_item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		font-size: 14px;
		margin-top: 5px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.3);
		cursor: pointer;
		.item_title {
			width: 50%;
		}
	}
}
</style>
